body
{
    background-image: url(../images/bg.jpg);
	background-position: 0px 0px;
}
#game
{
    width: 860px;
    height: 462px;
    margin: 0 auto;
    border: 1px solid #666;
    border-radius: 10px;
    background-image: url(../images/table.jpg);
    position: relative;
    -webkit-box-pack:center;
    -webkit-box-align:center;
	display: -webkit-box;
}
#cards
{
	left: 10px;
    width: 800px;
    height: 400px;
    position: relative;
	margin:30px auto;
}
#scorediv
{
	font-size:40px;
	background-color:#F00;
	display:none;
	-webkit-box-align:button;
}
.card
{
    width: 80px;
    height: 120px;
    position: absolute;
}
.face
{
    width: 100%;
    height: 100%;
    border-radius:10px;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -webkit-transition:all .3s;
}
.front
{
	background:#999 url(../images/deck.png)0 -480px;
	z-index:10;
}
.back
{
	background:#efefef url(../images/deck.png);
	-webkit-transform-rotateY(-180deg);
	z-index:8;
}
.face:hover
{
	-webkit-box-shadow:0 0 60px #F0F;
}
/*牌面定义样式*/
.cardAJ{background-position:-800px 0;}
.cardAQ{background-position:-880px 0;}
.cardAK{background-position:-960px 0;}
.cardBJ{background-position:-800px -120px;}
.cardBQ{background-position:-880px -120px;}
.cardBK{background-position:-960px -120px;}
.cardCJ{background-position:-800px -240px;}
.cardCQ{background-position:-880px -240px;}
.cardCK{background-position:-960px -240px;}
.cardDJ{background-position:-800px -360px;}
.cardDQ{background-position:-880px -360px;}
.cardDK{background-position:-960px -360px;}

.card-flipped .front
{
	/*保证牌底在牌面下面，z-index值切换为最小值*/
	z-index:8;
	-webkit-transform:rotateY(180deg);
}
.card-flipped .back
{
	/*保证牌底在牌面上面，z-index值切换为最大值*/
	z-index:10;
	/*前面牌面已经翻过去，现在翻回来*/
	-webkit-transform:rotateY(0deg);
}
/*移除牌*/
.card-removed
{
	opacity:0;
}